<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI Agent API 测试</title>
    <style>
        body { font-family: Arial, sans-serif; max-width: 800px; margin: 0 auto; padding: 20px; }
        .test-section { margin: 20px 0; padding: 15px; border: 1px solid #ccc; border-radius: 5px; }
        .result { background: #f5f5f5; padding: 10px; margin: 10px 0; white-space: pre-wrap; }
        button { background: #007bff; color: white; padding: 10px 20px; border: none; border-radius: 3px; cursor: pointer; }
        button:hover { background: #0056b3; }
        input, textarea { width: 100%; padding: 8px; margin: 5px 0; }
    </style>
</head>
<body>
    <h1>🤖 AI Agent API 功能测试</h1>

    <div class="test-section">
        <h3>1. API 健康检查</h3>
        <button onclick="testHealth()">检查健康状态</button>
        <div id="healthResult" class="result"></div>
    </div>

    <div class="test-section">
        <h3>2. 简单聊天测试</h3>
        <input type="text" id="simpleMessage" placeholder="输入消息..." value="你好，请简单介绍一下你自己">
        <button onclick="testSimpleChat()">发送消息</button>
        <div id="simpleChatResult" class="result"></div>
    </div>

    <div class="test-section">
        <h3>3. 代码生成测试</h3>
        <input type="text" id="codeLanguage" placeholder="编程语言" value="java">
        <input type="text" id="codeFramework" placeholder="框架" value="Spring Boot">
        <textarea id="codeMessage" placeholder="代码需求描述...">创建一个简单的用户实体类，包含id、username、email字段</textarea>
        <button onclick="testCodeGeneration()">生成代码</button>
        <div id="codeResult" class="result"></div>
    </div>

    <script>
        const API_BASE = 'http://localhost:8088/api/chat';

        async function testHealth() {
            const resultDiv = document.getElementById('healthResult');
            resultDiv.textContent = '检查中...';
            
            try {
                const response = await fetch(`${API_BASE}/health`);
                const data = await response.json();
                resultDiv.textContent = JSON.stringify(data, null, 2);
            } catch (error) {
                resultDiv.textContent = `错误: ${error.message}`;
            }
        }

        async function testSimpleChat() {
            const resultDiv = document.getElementById('simpleChatResult');
            const message = document.getElementById('simpleMessage').value;
            
            resultDiv.textContent = '发送中...';
            
            try {
                const response = await fetch(`${API_BASE}/simple`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({ message: message })
                });
                
                const data = await response.json();
                resultDiv.textContent = JSON.stringify(data, null, 2);
            } catch (error) {
                resultDiv.textContent = `错误: ${error.message}`;
            }
        }

        async function testCodeGeneration() {
            const resultDiv = document.getElementById('codeResult');
            const language = document.getElementById('codeLanguage').value;
            const framework = document.getElementById('codeFramework').value;
            const message = document.getElementById('codeMessage').value;
            
            resultDiv.textContent = '生成中...';
            
            try {
                const response = await fetch(`${API_BASE}/code`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({ 
                        message: message,
                        language: language,
                        framework: framework
                    })
                });
                
                const data = await response.json();
                resultDiv.textContent = JSON.stringify(data, null, 2);
            } catch (error) {
                resultDiv.textContent = `错误: ${error.message}`;
            }
        }

        // 页面加载时自动检查健康状态
        window.onload = function() {
            testHealth();
        };
    </script>
</body>
</html>